.button-size(@height; @padding-horizontal; @font-size; @border-radius) {
  @padding-vertical: max(
    (round(((@height - @font-size * @line-height-base) / 2) * 10) / 10) -
      @border-width-base,
    0
  );
  height: @height;
  padding: @padding-vertical @padding-horizontal;
  font-size: @font-size;
  border-radius: @border-radius;
}

.button-color(@color; @background; @border) {
  color: @color;
  border-color: @border;
  & when not(@background = null) {
    background: @background;
  }
}

.button-variant-primary(@color; @background; @backgroundHover: yellow; @backgroundActive: yellow) {
  .button-color(@color; @background; @background);
  text-shadow: @btn-text-shadow;
  box-shadow: @btn-primary-shadow;
  &:hover,
  &:focus {
    .button-color(
      @color; ~`colorPalette("@{background}", 5) `; ~`colorPalette("@{background}", 5) `
    );
  }

  &:active {
    .button-color(
        @color; ~`colorPalette("@{background}", 7) `; ~`colorPalette("@{background}", 7) `
      );
  }
}

//Button基本样式
.btn() {
  position: relative;
  display: inline-block;
  font-weight: @btn-font-weight;
  white-space: nowrap;
  text-align: center;
  background-image: none;
  border: @btn-border-width @btn-border-style transparent;
  box-shadow: @btn-shadow;
  cursor: pointer;
  transition: all 0.3s @ease-in-out;
  user-select: none;
  touch-action: manipulation;
  .button-size(
    @btn-height-base; @btn-padding-horizontal-base; @font-size-base; @btn-border-radius-base
  );
  &,
  &:active,
  &:focus {
    outline: 0;
  }
  &:not([disabled]):hover {
    text-decoration: none;
  }
  &:not([disabled]):active {
    outline: 0;
    box-shadow: none;
  }
  &[disabled] {
    cursor: not-allowed;
    > * {
      pointer-events: none;
    }
  }
}
.button-variant-other(@color; @background; @border) {
  .button-color(@color; @background; @border);
  &:hover,
  &:focus {
     .button-color(
        ~`colorPalette('@{btn-primary-bg}', 5) `; @background;
          ~`colorPalette('@{btn-primary-bg}', 5) `
      );
  }
}
// primary button style
.btn-primary() {
  .button-variant-primary(@btn-primary-color; @btn-primary-bg; @primary-color-hover; @primary-color-active);
}
// default button style
.btn-default() {
  .button-variant-other(@btn-default-color; @btn-default-bg; @btn-default-border; );
  &:hover,
  &:focus,
  &:active {
    text-decoration: none;
    background: @btn-default-bg;
  }
}
.btn-dashed() {
  .button-variant-other(@btn-default-color, @btn-default-bg, @btn-default-border);
  border-style: dashed;
}
.btn-link() {
  .button-variant-other(@link-color, transparent, transparent);
  box-shadow: none;
  &:hover {
    background: @btn-link-hover-bg;
  }
  &:hover,
  &:focus,
  &:active {
    border-color: transparent;
  }
}
.btn-text() {
  .button-variant-other(@text-color, transparent, transparent);
  box-shadow: none;
  &:hover,
  &:focus {
    color: @text-color;
    background: @btn-text-hover-bg;
    border-color: transparent;
  }

  &:active {
    color: @text-color;
    background: fadein(@btn-text-hover-bg, 1%);
    border-color: transparent;
  }
}